<template>
  <div>
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item,index) in tabs"
        :key="index"
        :label="item.name" :name="item.code">
        <Member
          v-if="item.code == '1'"
        />
        <Department
          v-if="item.code == '2'"
        />

        <Product
          v-if="item.code == '3'"
        />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script setup lang="ts">

import Member from "./components/Member.vue"
import Department from "./components/Department.vue"
import Product from "./components/Product.vue"

const tabs = ref([
  {
    name: "按成员",
    code: "1"
  },
  {
    name: "按部门",
    code: "2"
  },
  {
    name: "按商品",
    code: "3"
  }
])

const activeTab = ref(tabs.value[0].code)
</script>
<style lang="scss" scoped>

</style>
